<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="divport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/element.v2.css">
    <link rel="stylesheet" href="/css/user_center.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <title>个人中心</title>
    <script src="https://www.x5q.com/static/js/vue.js"></script>
  <script src="https://www.x5q.com/static/js/index.js"></script>
</head>
<body>
  <div id="app">
    <div class="tw-nav">
        <div class="main" style="width: 1680px;">
            <div class="nav-logo" style="width:350px;">
                <a href="#" title="" style="background:url(https://x5q-1302642180.cos.ap-beijing.myqcloud.com/591wf/logo.jpg) center no-repeat;width: 350px;">
                </a>
            </div>

            <div id="nav-box" class="nav nav-box menu">
                    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" >
                    <el-menu-item index="1">
                        <a href="/">首页</a>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <a href="/userCenter?type=uci" >个人中心</a>
                    </el-menu-item>
                    <!-- <el-menu-item index="3">
                    <a href="/friend.html">邀请好友</a>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <a href="/tutorial.html">新人教程</a>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <a href="/jifen.html">玩服积分介绍</a>
                    </el-menu-item> -->
                    <el-menu-item index="6">
                        <a href="http://check.x5q.vip:8899" target="_blank">爆率查询</a>
                    </el-menu-item>
                    <!-- <el-menu-item index="7">
                        <a href="/bfk.html">包服卡</a>
                    </el-menu-item> -->
                    <el-menu-item index="8">
                        <a href="/userCenter?type=yjjy">投诉建议</a>
                    </el-menu-item>
                </el-menu>
            </div>

        </div>
    </div>
@verbatim
    <!--<div class="uc-page" id="app">-->
        <div class="uc-page">
        <div class="uc-page-left">


            <div class="wechat-code" style="margin-top: 0">
                <div class="wechat-code-text">尊敬的VIP用户我是您</div>
                <div class="wechat-code-text">的专属客服：乐乐</div>
                <img src="/images/uc/wx-qrcode.jpeg" alt="">
                <div class="wechat-code-text">接待时间：8:00 - 24:00</div>
            </div>
        </div>
        <div class="content-title">邀好友得充值</div>
                <div class="content-box">
                    <div class="invite-top">
                        <div>
                            <div style="margin-left: 100px;display: flex;">
                                <div style="margin-right: 16px;">
                                    <div class="my-invite-title">我的邀请二维码:</div>
                                    <!--<el-button type="primary" size="mini" style="margin-left: 6px;" @click="downloadQrCode">保存图片</el-button>-->
                                </div>
                                <div id="invite-qr-code">
                                    <img :src="inviteQrCodeUrl" style="width: 300px; height: 300px" alt="">
                                </div>
                                    <div class="invite-rule">
                                <el-card shadow="never" style="margin-top: 20px;">
                                    <div class="invite-rule-title">活动规则：</div>
                                    <p class="txt-des-tag">1、拉新规则:只有之前未体验过平台的新人才会被系统判定为有效新人</p>
                                    <p class="txt-des-tag">2、邀请记录里可以看到自己绑定的好友以及返利记录,被邀请打开邀请链接后记得要扫码登录主站才能有效绑定</p>
                                    <p class="txt-des-tag">3、请把该邀请好友的二维码截图发给被邀请人，对方用微信扫码即可绑定成功</p>
                                </el-card>
                            </div>
                            </div>
                        <!--    <div class="my-invite-title">我的邀请链接:</div>-->
                        <!--    <div style="display: flex; align-items: center;">-->
                        <!--        <el-tag style="color: #e54513">{{inviteUrl}}{{userInfo.user.id}}</el-tag>-->
                        <!--        <el-button type="primary" size="mini" style="margin-left: 6px;" @click="copyLink(inviteUrl+userInfo.user.id)">复制</el-button>-->
                        <!--    </div>-->
                        <!--    <div class="invite-rule">-->
                        <!--        <el-card shadow="never" style="margin-top: 20px;">-->
                        <!--            <div class="invite-rule-title">活动规则：</div>-->
                        <!--            <p class="txt-des-tag">1、拉新规则:只有之前未体验过平台的新人才会被系统判定为有效新人</p>-->
                        <!--            <p class="txt-des-tag">2、邀请记录里可以看到自己绑定的好友以及返利记录,被邀请打开邀请链接后记得要扫码登录主站才能有效绑定</p>-->
                        <!--            <p class="txt-des-tag">3、邀请好友可永久获得被邀请人充值金额20%的回报，谈合作可直接联系客服</p>-->
                        <!--        </el-card>-->
                        <!--    </div>-->
                        </div>

                    </div>
                    <div class="invite-center">
                        <!-- <img src="/images/uc/invite.png" alt=""> -->
                        <!--<img src="/images/uc/invite1.jpg" alt="">
                        <img src="/images/uc/invite2.jpg" alt="">
                        <img src="/images/uc/invite3.jpg" alt="">-->
                    </div>
                    <div class="invite-bottom" @click="getInviteeList">
                        邀 请 记 录
                    </div>
                </div>
        <div class="uc-page-right" :style="ucPageRightStyle">
            <div class="tab-bar">
                <div
                    :class="active === item.id ? 'tab-item-active' : ''"
                    class="tab-item"
                    v-for="item in tabList"
                    :key="item.id"
                    @click="changeTab(item.id)"
                >
                    {{item.title}}
                </div>
            </div>

            <div class="tab-content" v-if="active === 'uci'">
                <div class="content-title">个人中心</div>
                <div class="content-box">
                    <div class="user-info-bar">
                        <div class="user-box">
                            <div class="user-head">
                                <img class="atx" :src="userInfo.cur_level.icon" alt="">
                            </div>
                            <h3 class="vip-tag">
                                <p style="cursor:pointer;" @click="goLevel">{{userInfo.cur_level.title}}</p><span class="xjd_h3">{{userInfo.user.username}}</span>
                                <path
                                    d="M8.83994 2.4L3.36661 8.19334C3.15994 8.41334 2.95994 8.84667 2.91994 9.14667L2.67328 11.3067C2.58661 12.0867 3.14661 12.62 3.91994 12.4867L6.06661 12.12C6.36661 12.0667 6.78661 11.8467 6.99327 11.62L12.4666 5.82667C13.4133 4.82667 13.8399 3.68667 12.3666 2.29334C10.8999 0.913335 9.78661 1.4 8.83994 2.4Z"
                                    stroke="#292D32" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
                                </path>
                                <path d="M7.92664 3.36664C8.2133 5.20664 9.70664 6.6133 11.56 6.79997" stroke="#292D32"
                                      stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M2 14.6667H14" stroke="#292D32" stroke-miterlimit="10" stroke-linecap="round"
                                      stroke-linejoin="round"></path>
                            </h3>
                            <div class="uid" @click="copyLink(userInfo.user.unionid)">
                                UID：'{{userInfo.user.unionid}}'
                                
                            </div>
                            <div class="hydj_left_right">
                                <h1><span>{{userInfo.user.total_recharge}}<i>/{{userInfo.next_level.need_money}}</i></span><span>{{userInfo.next_level.title}}</span>
                                </h1>
                                <el-progress :percentage="(userInfo.user.total_recharge/userInfo.next_level.need_money)*100" :show-text="false"></el-progress>
                            </div>
                            <h6 style="margin-bottom:12px;color:#C0AE70;font-size:12px;font-weight:400" v-if="userInfo.next_level.id != userInfo.cur_level.id">
                                距离<span>{{userInfo.next_level.title}}</span>还差<i style="font-style:normal;color: #DF0600;">{{userInfo.next_level.need_money-userInfo.user.total_recharge}}</i>经验
                                <strong style="color: #dc0f15; margin-left: 10px;cursor: pointer;" @click="refreshUserInfo">刷新</strong>
                            </h6>
                            <div class="hyzx_dl"
                                 style="width: 70%;margin: 0 auto;display: flex;justify-content: space-between; margin-top: 16px;">
                                <!-- 微信 -->
                                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_5004_51693)">
                                        <circle cx="16" cy="16" r="16" fill="#ecb444"></circle>
                                        <path
                                            d="M19.1838 13.1043C19.3907 13.1043 19.5944 13.12 19.7991 13.1425C19.2479 10.5753 16.504 8.6684 13.3709 8.6684C9.86875 8.6684 7 11.0545 7 14.0864C7 15.8358 7.954 17.2724 9.54925 18.3884L8.9125 20.3043L11.14 19.1883C11.9365 19.3446 12.5755 19.5066 13.3709 19.5066C13.5711 19.5066 13.7691 19.4976 13.9649 19.483C13.8411 19.0566 13.768 18.6111 13.768 18.1465C13.7691 15.3633 16.1586 13.1043 19.1838 13.1043ZM15.7592 11.3774C16.2407 11.3774 16.5569 11.6935 16.5569 12.1728C16.5569 12.6498 16.2407 12.9693 15.7592 12.9693C15.2834 12.9693 14.8041 12.6498 14.8041 12.1728C14.8041 11.6924 15.2822 11.3774 15.7592 11.3774ZM11.3009 12.9693C10.8227 12.9693 10.3412 12.6498 10.3412 12.1728C10.3412 11.6935 10.8227 11.3774 11.3009 11.3774C11.779 11.3774 12.0963 11.6924 12.0963 12.1728C12.0963 12.6498 11.779 12.9693 11.3009 12.9693ZM25 18.07C25 15.523 22.4508 13.4474 19.5876 13.4474C16.5557 13.4474 14.1696 15.5241 14.1696 18.07C14.1696 20.6238 16.5569 22.6926 19.5876 22.6926C20.2221 22.6926 20.8622 22.534 21.499 22.3743L23.2461 23.3328L22.7669 21.7398C24.046 20.779 25 19.5066 25 18.07ZM17.8304 17.2724C17.5142 17.2724 17.1936 16.9574 17.1936 16.6356C17.1936 16.3184 17.5142 15.9989 17.8304 15.9989C18.3141 15.9989 18.628 16.3184 18.628 16.6356C18.628 16.9574 18.3141 17.2724 17.8304 17.2724ZM21.3347 17.2724C21.0209 17.2724 20.7014 16.9574 20.7014 16.6356C20.7014 16.3184 21.0197 15.9989 21.3347 15.9989C21.814 15.9989 22.1324 16.3184 22.1324 16.6356C22.1324 16.9574 21.814 17.2724 21.3347 17.2724Z"
                                            fill="white"></path>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_5004_51693">
                                            <rect width="32" height="32" fill="white"></rect>
                                        </clipPath>
                                    </defs>
                                </svg>
                                <!-- 手机 -->
                                <el-tooltip v-if="!userInfo.user.mobile" class="item" effect="dark" content="" placement="top-end">
                                    <el-badge value="福利" class="item">
                                        <svg class="sj-box" style="cursor: pointer;" width="32" height="32" viewBox="0 0 32 32"
                                             fill="none" xmlns="http://www.w3.org/2000/svg" data-toggle="modal"
                                             @click="bindMobileClick">
                                            <g clip-path="url(#clip0_2546_19888)">
                                                <circle cx="16" cy="16" r="16" fill="#E8E8E8"></circle>
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                      d="M12 8C10.8954 8 10 8.89543 10 10V19.3333H22V20.3333H10V22.0001C10 23.1046 10.8954 24.0001 12 24.0001H20.0001C21.1046 24.0001 22.0001 23.1046 22.0001 22.0001V10C22.0001 8.89543 21.1046 8 20.0001 8H12ZM13.8334 9.33329C13.5572 9.33329 13.3334 9.55715 13.3334 9.83329C13.3334 10.1094 13.5572 10.3333 13.8334 10.3333H18.1667C18.4429 10.3333 18.6667 10.1094 18.6667 9.83329C18.6667 9.55715 18.4429 9.33329 18.1667 9.33329H13.8334ZM16.1667 21.3333C15.7065 21.3333 15.3334 21.7064 15.3334 22.1667C15.3334 22.6269 15.7065 23 16.1667 23C16.627 23 17.0001 22.6269 17.0001 22.1667C17.0001 21.7064 16.627 21.3333 16.1667 21.3333Z"
                                                      fill="white"></path>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_2546_19888">
                                                    <rect width="32" height="32" fill="white"></rect>
                                                </clipPath>
                                            </defs>
                                        </svg>
                                    </el-badge>
                                </el-tooltip>
                                <svg v-else class="sj-box" style="cursor: pointer;" width="32" height="32" viewBox="0 0 32 32"
                                     fill="none" xmlns="http://www.w3.org/2000/svg" data-toggle="modal"
                                     @click="bindMobileClick">
                                    <g clip-path="url(#clip0_2546_19888)">
                                        <circle cx="16" cy="16" r="16" fill="#ecb444"></circle>
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                              d="M12 8C10.8954 8 10 8.89543 10 10V19.3333H22V20.3333H10V22.0001C10 23.1046 10.8954 24.0001 12 24.0001H20.0001C21.1046 24.0001 22.0001 23.1046 22.0001 22.0001V10C22.0001 8.89543 21.1046 8 20.0001 8H12ZM13.8334 9.33329C13.5572 9.33329 13.3334 9.55715 13.3334 9.83329C13.3334 10.1094 13.5572 10.3333 13.8334 10.3333H18.1667C18.4429 10.3333 18.6667 10.1094 18.6667 9.83329C18.6667 9.55715 18.4429 9.33329 18.1667 9.33329H13.8334ZM16.1667 21.3333C15.7065 21.3333 15.3334 21.7064 15.3334 22.1667C15.3334 22.6269 15.7065 23 16.1667 23C16.627 23 17.0001 22.6269 17.0001 22.1667C17.0001 21.7064 16.627 21.3333 16.1667 21.3333Z"
                                              fill="white"></path>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_2546_19888">
                                            <rect width="32" height="32" fill="white"></rect>
                                        </clipPath>
                                    </defs>
                                </svg>

                                <!-- 实名 -->
                                <!--<el-tooltip class="item" effect="dark" content="实名认证赠送1000乐游币" placement="top-end">
                                    <el-badge value="福利" class="item">
                                        <svg class="sm-box" style="cursor: pointer;" width="32" height="32" viewBox="0 0 32 32"
                                             fill="none" xmlns="http://www.w3.org/2000/svg" @click="realNameClick">
                                            <g clip-path="url(#clip0_5004_45205)">
                                                <circle cx="16" cy="16" r="16" :fill="userInfo.user.id_card ? '#ecb444' : '#E8E8E8'"></circle>
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                      d="M7 12C7 10.8954 7.89543 10 9 10H23.9167C25.0212 10 25.9167 10.8954 25.9167 12V20.1067C25.9167 21.2112 25.0212 22.1067 23.9167 22.1067H9C7.89543 22.1067 7 21.2112 7 20.1067V12ZM13.0533 14.1833C12.4385 14.1833 11.94 14.6818 11.94 15.2967C11.94 15.9115 12.4385 16.41 13.0533 16.41C13.6682 16.41 14.1667 15.9115 14.1667 15.2967C14.1667 14.6818 13.6682 14.1833 13.0533 14.1833ZM11.14 15.2967C11.14 14.24 11.9966 13.3833 13.0533 13.3833C14.1101 13.3833 14.9667 14.24 14.9667 15.2967C14.9667 15.867 14.7171 16.3791 14.3212 16.7296C15.1562 17.181 15.7234 18.0643 15.7234 19.08C15.7234 19.3009 15.5443 19.48 15.3234 19.48C15.1025 19.48 14.9234 19.3009 14.9234 19.08C14.9234 18.0472 14.0861 17.21 13.0534 17.21C12.0206 17.21 11.1834 18.0472 11.1834 19.08C11.1834 19.3009 11.0043 19.48 10.7834 19.48C10.5625 19.48 10.3834 19.3009 10.3834 19.08C10.3834 18.0643 10.9506 17.181 11.7855 16.7297C11.3896 16.3791 11.14 15.867 11.14 15.2967ZM16.8367 15.0093C16.8367 14.7501 17.0468 14.54 17.3059 14.54H18.6374C18.8966 14.54 19.1067 14.7501 19.1067 15.0093C19.1067 15.2684 18.8966 15.4785 18.6374 15.4785H17.3059C17.0468 15.4785 16.8367 15.2684 16.8367 15.0093ZM17.3059 16.81C17.0468 16.81 16.8367 17.0201 16.8367 17.2792C16.8367 17.5384 17.0468 17.7485 17.3059 17.7485H21.6641C21.9232 17.7485 22.1333 17.5384 22.1333 17.2792C22.1333 17.0201 21.9232 16.81 21.6641 16.81H17.3059Z"
                                                      fill="white"></path>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_5004_45205">
                                                    <rect width="32" height="32" fill="white"></rect>
                                                </clipPath>
                                            </defs>
                                        </svg>
                                    </el-badge>
                                </el-tooltip>-->

                                <svg class="sm-box" style="cursor: pointer;" width="32" height="32" viewBox="0 0 32 32"
                                     fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_5004_45205)">
                                        <circle cx="16" cy="16" r="16" fill="#E8E8E8"></circle>
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                              d="M7 12C7 10.8954 7.89543 10 9 10H23.9167C25.0212 10 25.9167 10.8954 25.9167 12V20.1067C25.9167 21.2112 25.0212 22.1067 23.9167 22.1067H9C7.89543 22.1067 7 21.2112 7 20.1067V12ZM13.0533 14.1833C12.4385 14.1833 11.94 14.6818 11.94 15.2967C11.94 15.9115 12.4385 16.41 13.0533 16.41C13.6682 16.41 14.1667 15.9115 14.1667 15.2967C14.1667 14.6818 13.6682 14.1833 13.0533 14.1833ZM11.14 15.2967C11.14 14.24 11.9966 13.3833 13.0533 13.3833C14.1101 13.3833 14.9667 14.24 14.9667 15.2967C14.9667 15.867 14.7171 16.3791 14.3212 16.7296C15.1562 17.181 15.7234 18.0643 15.7234 19.08C15.7234 19.3009 15.5443 19.48 15.3234 19.48C15.1025 19.48 14.9234 19.3009 14.9234 19.08C14.9234 18.0472 14.0861 17.21 13.0534 17.21C12.0206 17.21 11.1834 18.0472 11.1834 19.08C11.1834 19.3009 11.0043 19.48 10.7834 19.48C10.5625 19.48 10.3834 19.3009 10.3834 19.08C10.3834 18.0643 10.9506 17.181 11.7855 16.7297C11.3896 16.3791 11.14 15.867 11.14 15.2967ZM16.8367 15.0093C16.8367 14.7501 17.0468 14.54 17.3059 14.54H18.6374C18.8966 14.54 19.1067 14.7501 19.1067 15.0093C19.1067 15.2684 18.8966 15.4785 18.6374 15.4785H17.3059C17.0468 15.4785 16.8367 15.2684 16.8367 15.0093ZM17.3059 16.81C17.0468 16.81 16.8367 17.0201 16.8367 17.2792C16.8367 17.5384 17.0468 17.7485 17.3059 17.7485H21.6641C21.9232 17.7485 22.1333 17.5384 22.1333 17.2792C22.1333 17.0201 21.9232 16.81 21.6641 16.81H17.3059Z"
                                              fill="white"></path>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_5004_45205">
                                            <rect width="32" height="32" fill="white"></rect>
                                        </clipPath>
                                    </defs>
                                </svg>
                            </div>
                        </div>
                        <div style="height: 270px; width: 0; border-left: 1px solid #ccc;"></div>
                        <div class="lyb-box user-info-bar-item">
                            <div class="user-info-title">乐游币余额</div>
                            <div class="user-info-value">{{userInfo.user.ly_balance}}</div>
                            <div>
                                <el-button type="warning" plain @click="active='dh';dhForm.balance_type=1">兑换游戏</el-button>
                            </div>
                            <div class="user-info-lbt" @click="active='rechargeLog'">
                                查看明细
                            </div>
                        </div>
                        <div style="height: 270px; width: 0; border-left: 1px solid #ccc;"></div>
                        <div class="integral-box user-info-bar-item">
                            <div class="user-info-title">积分余额</div>
                            <div class="user-info-value">{{userInfo.user.integral}}</div>
                            <div>
                                <el-button type="warning" plain @click="active='shop'">积分商城</el-button>
                            </div>
                            <div class="user-info-lbt" @click="showIntegral">
                                查看明细
                            </div>
                        </div>
                        <div style="height: 270px; width: 0; border-left: 1px solid #ccc;"></div>
                        <div class="integral-box user-info-bar-item">
                            <div class="user-info-title">玩服积分</div>
                            <div class="user-info-value">{{userInfo.user.wf_integral}}</div>
                            <div>
                                <el-button type="warning" plain @click="active='dh';dhForm.balance_type=2">兑换游戏</el-button>
                            </div>
                            <div class="user-info-lbt" @click="showIntegral('wf')">
                                查看明细
                            </div>
                        </div>
                    </div>

                    <!-- <div class="game-list-box">
                        <div class="game-list-title">最近在玩</div>
                        <div class="game-list">
                            <div class="game-item"
                                 v-for="item in zuiJinGames"
                                 :key="item.id"
                                 @click="goGameSite(item.url)"
                            >
                                <div class="game-item-img">
                                    <img :src="'https://www.l3y.cn/uploads/'+item.image" alt="">
                                </div>
                                <div class="game-btm">
                                    <div class="game-name">{{item.server_name}}</div>
                                    <div class="game-desc">{{item.server_ip}}</div>
                                </div>
                            </div>
                        </div>
                    </div> -->

                    <!-- <div class="game-list-box">
                        <div class="game-list-title">大家都在玩</div>
                        <div class="game-list">
                            <div class="game-list">
                                <div class="game-item"
                                     v-for="item in daJiaGames"
                                     :key="item.id"
                                     @click="goGameSite(item.url)"
                                >
                                    <div class="game-item-img">
                                        <img :src="'https://www.l3y.cn/uploads/'+item.image" alt="">
                                    </div>
                                    <div class="game-btm">
                                        <div class="game-name">{{item.server_name}}</div>
                                        <div class="game-desc">{{item.server_ip}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->

                    <div class="game-list-box">
                        <div class="game-list-title">会员须知</div>
                        <div style="margin-top: 16px;">
                            <el-card shadow="never" >
                            
                                <div class="txt-des-tag">1、有任何游戏问题和网站问题都可以联系左侧客服</div>
                                <div class="txt-des-tag">2、专为会员设置投诉建议专栏，有什么想法都可以进行反馈</div>
                            </el-card>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-content" v-if="active === 'dh'">
                <div class="content-title">余额兑换</div>
                <div class="content-box">
                    <el-form ref="dhForm" :model="dhForm" label-width="100px" style="width: 450px" inline-message >
                        <el-form-item label="游戏版本">
                            <el-select
                                v-model="dhForm.game_id"
                                placeholder="输入关键字搜对应版本"
                                filterable
                                remote
                                :remote-method="remoteGame"
                                reserve-keyword
                                @change="gameChange"
                                style="width: 100%">
                                <el-option
                                    v-for="item in gameList"
                                    :key="item.id"
                                    :label="item.server_name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="游戏区服">
                            <el-select
                                v-model="dhForm.game_server_id"
                                placeholder="请选择区服"
                                style="width: 100%">
                                <el-option
                                    v-for="item in serverList"
                                    :key="item.id"
                                    :label="item.server_name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="游戏账号">
                            <el-input v-model="dhForm.game_account"></el-input>
                        </el-form-item>
                        <el-form-item label="确认账号">
                            <el-input v-model="dhForm.game_account_pre"></el-input>
                        </el-form-item>
                        <el-form-item label="支付类型">
                            <el-radio-group v-model="dhForm.balance_type">
                                <el-radio-button :label="1">乐游币</el-radio-button>
                                <el-radio-button :label="2">玩服积分</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="钱包余额">
                            {{dhForm.balance_type === 1 ? userInfo.user.ly_balance : userInfo.user.wf_integral}} {{dhForm.balance_type === 1 ? '乐游币' : '玩服积分'}}
                        </el-form-item>
                        <el-form-item label="兑换金额" style="width: 1200px;">
                            <el-radio-group v-model="dhForm.money">
                                <el-radio-button
                                    v-for="(item, index) in dhMoneyList"
                                    :key="index"
                                    :label="item"
                                    :disabled="item > (dhForm.balance_type === 1 ? userInfo.user.ly_balance : userInfo.user.wf_integral)"
                                >{{item}}{{dhForm.balance_type === 1 ? '乐游币' : '玩服积分'}}</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <!--<el-form-item label="自定义金额" :error="(dzRmbNum==0 && dhForm.money) ? '金额需为1000的倍数' : ''">
                            <el-input v-model="dhForm.money"></el-input>
                        </el-form-item>-->
                        <el-form-item label="游戏到账">
                            {{dzRmbNum}}{{lybOrRmb}}
                        </el-form-item>
                        <el-form-item>
                            <el-button type="warning" @click="commitDh">立即兑换</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

            <div class="tab-content" v-if="active === 'recharge'">
                <div class="content-title">在线充值</div>
                <div class="content-box">
                    <el-form :model="rechargeForm" label-width="100px" style="width: 550px">
                        <el-form-item label="支付金额"  style="width: 600px;">
                            <el-radio-group v-model="rechargeForm.money">
                                <el-radio-button
                                    v-for="item in rechargeMoneyList"
                                    :label="item.need_money"
                                >{{item.need_money}}元</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <!--<el-form-item label="自定义金额">-->
                        <!--    <el-input v-model="rechargeForm.money"></el-input>-->
                        <!--</el-form-item>-->
                        <el-form-item label="支付类型">
                            <el-radio-group v-model="rechargeForm.pay_type">
                                <el-radio-button label="WEIXIN">微信支付</el-radio-button>
                                <el-radio-button label="ALIPAY">支付宝</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="充值后到账">
                            <span>
                                乐游币 + {{rechargeAfter.ly}}
                            </span>
                            <span v-if="rechargeAfter.level_wf">
                                | 赠送玩服积分 +{{rechargeAfter.level_wf}}
                            </span>
                            <span v-if="rechargeAfter.rule_ly">
                                | 额外赠送乐游币(活动赠送) +{{rechargeAfter.rule_ly}}
                            </span>
                            <span v-if="rechargeAfter.gift_wf">
                                | 额外赠送玩服积分 +{{rechargeAfter.gift_wf}}
                            </span>
                            <span v-if="rechargeAfter.integral">
                                | 赠送商城积分 +{{rechargeAfter.integral}}
                            </span>

                        </el-form-item>
                        <el-form-item>
                            <el-button type="warning" @click="startPay">立即充值</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-card shadow="never">
                                <div class="txt-des-tag" style="font-size: 20px; width: 500px;">
                                    多充多送，同时享受会员福利和转区福利<br>
                                    <span style="font-size: 12px;">由于充值平台不支持小数，会员充值100以上才享受赠送比例</span>
                                </div>
                            </el-card>

                        </el-form-item>

                    </el-form>
                </div>
            </div>

            <div class="tab-content" v-if="active === 'rechargeLog'">
                <div class="content-title">余额记录</div>
                <div class="content-box">
                    <el-table
                        :data="rechargeList"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="create_time"
                            label="日期"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="change"
                            label="金额"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="pay_type"
                            label="来源">
                            <template slot-scope="scope">
                                <div >
                                    <span style="font-size: 12px;" v-if="scope.row.from_type === 1">充值</span>
                                    <span style="font-size: 12px;" v-if="scope.row.from_type === 2">兑换</span>
                                    <span style="font-size: 12px;" v-if="scope.row.from_type === 3">兑换商品</span>
                                    <span style="font-size: 12px;" v-if="scope.row.from_type === 4">好友奖励</span>
                                    <span style="font-size: 12px;" v-if="scope.row.from_type === 5">实名认证</span>
                                    <span style="font-size: 12px;" v-if="scope.row.from_type === 6">手机号绑定</span>
                                    <span style="font-size: 12px;" v-if="scope.row.from_type === 7">好友手机号绑定</span>
                                    <span style="font-size: 12px;" v-if="scope.row.from_type === 8">好友实名认证</span>
                                    <span style="font-size: 12px;" v-if="scope.row.from_type === 9">平台修改</span>
                                    <span style="font-size: 12px;" v-if="scope.row.from_type === 10">活动赠送</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="remark"
                            label="说明">
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <div class="tab-content" v-if="active === 'level'">
                <div class="content-title">等级福利</div>
                <div class="content-box">
                    <div>
                        <div class="game-list-title" style="margin-bottom: 16px;">成长值说明</div>
                        <div class="grow-val-text">一、会员成长等级</div>
                        <div class="grow-val-text">1、会员有16个等级，lv1-lv16，期间充值，成长值会累加</div>
                        <div class="grow-val-text">2、Lv16不是最高等级，后续会根据玩家反馈开放新等级</div>
                        <div class="grow-val-text">二、会员成长值</div>
                        <div class="grow-val-text">1、成长值=充值获得成长值+活动赠送成长值</div>
                        <div class="grow-val-text">2、会员等级越高，赠送积分越多</div>

                        <div class="five-day-box" v-if="fiveDayJoin">
                            <el-button type="primary" @click="getFiveDayDhq" :disabled="!fiveDayCanGet">{{nextFiveGetDays?`${nextFiveGetDays}日后`: ''}}领取{{fiveDayReward}}福利券</el-button>
                            <el-button style="margin-left: 20px;" type="primary" @click="showFiveDayDhqList">我的券包</el-button>
                            <el-button v-if="canChangeKf" style="margin-left: 20px;" type="success" @click="bindKfShow=true">更换客服</el-button>
                        </div>

                        <!-- <div class="game-list-title" style="margin: 16px 0;">成长等级说明</div>
                        <el-table
                            :data="levelList"
                            border
                            style="width: 100%">
                            <el-table-column
                                prop="title"
                                label="成长等级"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="need_money"
                                label="所需成长值">
                            </el-table-column>
                            <el-table-column
                                label="充值赠送比例">
                                <template slot-scope="scope">
                                    {{scope.row.ly_rate}}%
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="积分赠送">
                                <template slot-scope="scope">
                                    {{scope.row.integral_rate}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="节日福利">
                                <template slot-scope="scope">
                                    {{scope.row.jr_gift}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="专属客服福利">
                                <template slot-scope="scope">
                                    {{scope.row.zskf_gift}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="每5日领取福利券">
                                <template slot-scope="scope">
                                    {{scope.row.day_reward}}
                                </template>
                            </el-table-column>
                        </el-table> -->
                        <br>
                        <el-tag type="primary">1.充值获得会员成长值，1元充值 = 1 成长值</el-tag><br><br>
                        <el-tag type="primary">2.积分所得=充值赠送积分+累充到达积分，例如：您是LV5，充值100元，获得100*5=500积分</el-tag><br><br>
                        <!-- <el-tag type="primary">3.3，充值所得=充值额度+赠送额度，例如：您是LV3，获得100元+100*5%=105元，加上转区福利，最后将获得<span style="font-size: 16px; color: #ef1313">21210</span>RMB点</el-tag><br>-->
                        
                    </div> 

                </div>
            </div>

            <div class="tab-content" v-if="active === 'shop'">
                <div class="content-title">积分商城</div>
                <div class="content-box">
                    <div class="shop-top-bar">
                        <div class="shop-integral-bar">
                            <div class="shop-cur-integral" style="font-size: 16px">
                                当前积分：<span>{{userInfo.user.integral}}</span>
                            </div>
                            <div class="shop-cur-integral" style="margin-left: 10px; color: #00a8ff; font-size: 14px; cursor: pointer;">
                                获取积分 >
                            </div>
                        </div>

                        <div class="shop-top-bar-right">
                            <div class="shop-top-bar-right-item" @click="showAddressWin=true">地址管理</div>
                            <el-divider direction="vertical"></el-divider>
                            <div class="shop-top-bar-right-item" @click="showIntegral">积分明细</div>
                        </div>
                    </div>

                    <div class="shop-goods-list">
                        <div
                            v-for="item in shopGoodsList"
                            :key="item.id"
                            class="shop-goods-item"
                        >
                            <img :src="item.image" alt="">
                            <div class="shop-goods-item-bottom">
                                <div class="shop-goods-title">{{item.title}}</div>
                                <div class="shop-dh-bar">
                                    <div class="shop-goods-integral">{{item.integral}}积分</div>
                                    <el-button @click="dhGoods(item)" type="danger" size="mini" :disabled="item.integral > userInfo.user.integral">立即兑换</el-button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="shop-footer">
                        <div class="game-list-title">商城须知</div>
                        <el-card shadow="never" style="margin-top: 20px;">
                            <p class="txt-des-tag">1、所有兑换物品，如未到账，请联系左侧客服</p>
                            <p class="txt-des-tag">2、兑换物品想要物流单号的，请联系左侧客服</p>
                        </el-card>
                    </div>
                </div>
            </div>

            <div class="tab-content" v-if="active === 'invitee'">
                
            </div>

            <div class="tab-content" v-if="active === 'dhLog'">
                <div class="content-title">兑换记录</div>
                <div class="content-box">
                    <el-table
                        :data="dhLogList"
                        border
                        style="width: 100%">
                        <el-table-column
                            prop="create_time"
                            label="日期"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="game_url"
                            label="游戏名称"
                        >
                        </el-table-column>
                        <el-table-column
                            label="金额"
                        >
                            <template slot-scope="scope">
                                {{scope.row.money}}{{scope.row.balance_type === 1 ? '乐游币' : '玩服积分'}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="game_num"
                            label="账号">
                        </el-table-column>
                        <el-table-column
                            prop="status"
                            label="状态">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.status === 1" type="success">成功</el-tag>
                                <el-tag v-if="scope.row.status === 2">待处理</el-tag>
                                <el-tag v-if="scope.row.status === 3" type="danger">失败</el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <div class="tab-content" v-if="active === 'yjjy'">
                <div class="content-title">投诉建议</div>
                <div class="content-box">
                    <el-form :model="yjjyForm" label-width="100px" style="width: 650px">
                        <el-form-item label="意见建议">
                            <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 15}" v-model="yjjyForm.yj"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式">
                            <el-input v-model="yjjyForm.mobile"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="warning" @click="commitYj">提交</el-button>
                        </el-form-item>

                    </el-form>
                </div>
            </div>

        </div>

        <!--    充值弹窗-->
        <el-dialog title="支付页面" :visible.sync="payVisible" width="600px" center>
            <template v-if="payInfo.type === 1">
                <div id="pay-web-info"></div>
            </template>
            <template v-if="payInfo.type === 2">
                <div style="margin: 100px 0; text-align: center; font-size: 20px;">
                    请勿关闭此弹窗，支付成功后会自动关闭！
                </div>
            </template>
            <template v-if="payInfo.type === 3">
                <div id="qrcode" style="width: 256px; margin: 20px auto;"></div>
            </template>
            <template v-if="payInfo.type === 4 || payInfo.type === 5">
                <div style="width: 256px; margin: 20px auto;">
                    <img :src="payInfo.data" alt="" style="width: 256px; height: 256px;">
                </div>
            </template>
        </el-dialog>

        <!--    地址弹窗-->
        <el-dialog title="地址管理" :visible.sync="showAddressWin" width="600px" center>
            <div class="address-win">
                <el-button size="mini" type="primary" style="margin-bottom: 16px;" @click="addAddress">添加地址</el-button>
                <el-card
                    style="margin-bottom: 10px;"
                    shadow="never"
                    v-for="item in addressList"
                    :key="item.id"
                >
                    <div style="height: 40px; display:flex; justify-content: space-between; align-items: center;">
                        <div @click="editAddress(item)" style="cursor: pointer;">
                            <div class="address-item">收件人： {{item.nickname}}</div>
                            <div class="address-item">联系方式： {{item.mobile}}</div>
                            <div class="address-item">详细地址： {{item.address}}</div>
                        </div>
                        <el-button type="text" style="color: #d92650" @click.stop="delAddress(item)">删除</el-button>
                    </div>

                </el-card>
            </div>
        </el-dialog>

        <!--    保存地址地址弹窗-->
        <el-dialog title="保存地址" :visible.sync="saveAddressWin" width="600px" center>
            <div class="address-win">
                <el-form :model="saveAddressForm" label-width="100px">
                    <el-form-item label="收件人">
                        <el-input v-model="saveAddressForm.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式">
                        <el-input v-model="saveAddressForm.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="详细地址">
                        <el-input type="textarea" v-model="saveAddressForm.address"></el-input>
                    </el-form-item>
                    <!--<el-form-item label="设为默认">
                        <el-checkbox v-model="saveAddressForm.is_default" :true-label="1" :false-label="2">默认</el-checkbox>
                    </el-form-item>-->
                    <el-form-item>
                        <el-button type="warning" @click="saveAddress">保存</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </el-dialog>

        <!--    兑换商品弹窗-->
        <el-dialog title="兑换商城" :visible.sync="showShopOrderWin" width="600px" center>
            <div class="address-win">
                <div style="font-size: 18px; margin-bottom: 16px;">请选择地址:</div>
                <el-card
                    style="margin-bottom: 10px;"
                    :shadow="shopOrderForm.address_id === item.id ? 'always' : 'never'"
                    v-for="item in addressList"
                    :key="item.id"
                >
                    <div @click="selectAddress(item)" style="cursor: pointer;">
                        <div class="address-item">收件人： {{item.nickname}}</div>
                        <div class="address-item">联系方式： {{item.mobile}}</div>
                        <div class="address-item">详细地址： {{item.address}}</div>
                    </div>
                </el-card>

                <el-button type="warning" @click="createShopOrder" :disabled="shopOrderForm.address_id === 0">兑换</el-button>
            </div>
        </el-dialog>

        <!--    积分明细弹窗-->
        <el-dialog title="积分明细" :visible.sync="showIntegralLogWin" width="800px" center>
            <div class="address-win">
                <el-table
                    :data="integralList"
                    border
                    style="width: 100%">
                    <el-table-column
                        prop="create_time"
                        label="日期"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="change"
                        label="积分"
                        width="100"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="remark"
                        label="说明">
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>


        <!--    邀请明细弹窗-->
        <el-dialog title="邀请明细" :visible.sync="showInviteeLogWin" width="800px" center>
            <div class="invitee-list-win">
                <el-table
                    :data="inviteeList"
                    border
                    style="width: 100%">
                    <el-table-column
                        prop="created_at"
                        label="日期"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="unionid"
                        label="用户"
                        width="260"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="remark"
                        width="160"
                        label="状态">
                        <template slot-scope="scope">
                            {{scope.row.mobile ? '绑定成功' : '手机号未绑定'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="remark"
                        label="操作">
                        <template slot-scope="scope">
                            <el-popover
                                placement="right"
                                width="360"
                            @show="getUserRecharge(scope.row.id)"
                            @hide=""
                            trigger="click">
                            <div style="height: 300px; overflow: auto;">
                                <el-table :data="subRechargeList">
                                    <el-table-column
                                        prop="create_time"
                                        width="160"
                                        label="日期"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="money"
                                        label="金额"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        label="返利状态"
                                    >
                                        <template slot-scope="scope">
                                            已充值
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>

                            <el-button slot="reference">充值记录</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>

        <!--    实名认证-->
        <el-dialog title="实名认证" :visible.sync="realNameWin" width="600px" center>
            <div class="address-win">
                <el-form :model="realNameForm" label-width="100px">
                    <el-form-item label="姓名">
                        <el-input v-model="realNameForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号">
                        <el-input v-model="realNameForm.idcard"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="warning" @click="commitRealName">认证</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </el-dialog>

        <!--    手机号绑定-->
        <el-dialog title="手机号绑定" :visible.sync="bindMobileWin" width="600px" center>
            <div class="address-win">
                <el-form :model="bindMobileForm" label-width="100px">
                    <el-form-item label="手机号">
                        <el-input placeholder="请输入内容" v-model="bindMobileForm.mobile">
                            <el-button slot="append" :disabled="smsBtnDisabled" @click="getSmsCode">{{smsBtnTxt}}</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="验证码">
                        <el-input v-model="bindMobileForm.sms_code"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="warning" @click="commitBindMobile">绑定</el-button>
                    </el-form-item>

                </el-form>
            </div>
        </el-dialog>
        <!--    客服绑定-->
        <!-- <el-dialog title="客服绑定" :visible.sync="bindKfShow" width="600px" center>
            <div class="address-win">
                <el-form ref="saveForm" label-width="100px">
                    <el-form-item label="选择客服">
                        <el-select v-model="curSelectKf" placeholder="请选择" @change="getKfuCode">
                            <el-option
                                v-for="item in canBindKfList"
                                :key="item.id"
                                :label="item.nickname"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="kfQrCodeUrl" label="绑定二维码">
                        <img :src="kfQrCodeUrl" style="width: 300px; height: 300px" alt="">
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="bindKfShow=false">关闭</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog> -->

        <!--    老兵活动-->
        <el-dialog title="老兵活动" :visible.sync="lbActivateShow" width="900px" center>
            <div class="address-win">
                <el-descriptions title="老兵活动奖励列表" :column="7" border direction="vertical">
                    <el-descriptions-item
                        v-for="item in lbActivateInfo.total_num"
                        :label="`第${item}天`"
                    >
                        {{lbActivateInfo.reward[item-1]}}
                        <div v-if="item <= lbActivateInfo.get_num"><br><el-tag size="mini" type="success">已领取</el-tag></div>
                        <div v-if="item == lbActivateInfo.get_num+1"><br><el-tag size="mini">{{lbBtnDisable ? '明':'今'}}日可领</el-tag></div>
                        <div v-if="item > lbActivateInfo.get_num+1"><br><el-tag size="mini" type="info">待领取</el-tag></div>
                    </el-descriptions-item>
                </el-descriptions>
                <div style="display: flex; justify-content: center; margin-top: 20px;">
                    <el-button type="success" @click="getLbActivate" :disabled="lbBtnDisable">领取奖励</el-button>
                </div>
            </div>
        </el-dialog>

        <!--    5天活动券包弹窗-->
        <el-dialog title="我的券包" :visible.sync="showMyFiveDayQb" width="900px" center>
            <div class="address-win">
                <el-table
                    :data="myFiveDayQList"
                    border
                    style="width: 100%">
                    <el-table-column
                        prop="create_time"
                        label="领取日期"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="expired_time"
                        label="过期日期"
                        width="160"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="get_num"
                        label="福利币"
                        width="100"
                    >
                    </el-table-column>
                    <el-table-column
                        label="状态">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status === 1" size="mini">待兑换</el-tag>
                            <el-tag v-if="scope.row.status === 2" size="mini" type="success">已兑换</el-tag>
                            <el-tag v-if="scope.row.status === 3" size="mini" type="info">已过期</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.status === 1" type="primary" @click="useFiveDayDhq(scope.row.id)" size="mini">兑换</el-button>
                            <div v-else>兑换时间:{{scope.row.update_time}}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    style="margin-top: 20px"
                    background
                    layout="prev, pager, next"
                    @current-change="myFiveDayQbPageChange"
                    :current-page="myFiveDayQbCurPage"
                    :page-count="myFiveDayQbTotalPage">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</div>
</body>
@endverbatim
<script src="/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/api.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入组件库 -->
<script src="/js/element.v2.js"></script>
<script src="/js/qrcode.min.js" type="text/javascript"></script>
<script>
    // new Vue({
    const App = new Vue({
      el: '#app',
        data() {
            return {
                ucPageRightStyle: {width: ''},
                active: 'uci',
                activeIndex2: '2',
                tabList: [
                    {
                        id: 'uci',
                        title: '个人中心'
                    },
                    {
                        id: 'dh',
                        title: '余额兑换'
                    },
                    {
                        id: 'recharge',
                        title: '在线充值'
                    },
                    {
                        id: 'rechargeLog',
                        title: '余额记录'
                    },
                    {
                        id: 'level',
                        title: '等级福利'
                    },
                    {
                        id: 'shop',
                        title: '积分商城'
                    },
                    {
                        id: 'invitee',
                        title: '邀请有奖'
                    },
                    {
                        id: 'dhLog',
                        title: '兑换记录'
                    },
                    {
                        id: 'yjjy',
                        title: '投诉建议'
                    },
                    {
                        id: 'index',
                        title: '退出登录'
                    },
                ],
                dhForm: {
                    game_id: '',
                    game_server_id: '',
                    game_account: '',
                    game_account_pre: '',
                    money: '',
                    balance_type: 1,
                },
                rechargeForm: {
                    money: '',
                    pay_type: 'WEIXIN',
                },
                rechargeList: [],
                levelList: [],
                dhLogList: [],
                userInfo: {
                    cur_level: {icon: ''},
                    next_level: {icon: ''},
                    user: {username: '', unionid: '', integral: 0}
                },
                serverList: [],
                gameList: [],
                dhMoneyList: JSON.parse({!! json_encode($dh_balance) !!}),
                dzRmbNum: 0,
                payLoading: false,
                payVisible: false,
                payInfo: {
                    type: 0,
                    data: "",
                },
                curOrderId: 0,
                curOrderType: 0,
                queryOrderStatusTimer: null,
                rechargeAfter: {integral:0, ly:0, gift_money: 0, wf_integral: 0},
                rechargeMoneyList: [],

                shopGoodsList: [],
                addressList: [],
                shopOrderForm: {
                    goods_id: 0,
                    address_id: 0,
                },
                saveAddressForm: {
                    id: 0,
                    nickname: '',
                    mobile: '',
                    address: '',
                    is_default: 2,
                },
                showShopOrderWin: false,
                showAddressWin: false,
                saveAddressWin: false,
                showIntegralLogWin: false,
                integralList: [],
                inviteUrl: location.protocol +'//'+ window.location.host+'?from_id=',
                yjjyForm: {yj: "", mobile: ''},
                showInviteeLogWin: false,
                inviteeList: [],
                subRechargeList: [],
                gameRechargeList: [],
                zuiJinGames: [],
                daJiaGames: [],
                realNameForm: {name: '', idcard: ''},
                realNameWin: false,
                bindMobileWin: false,
                bindMobileForm: {mobile: "", sms_code: ''},
                smsBtnDisabled: false,
                smsBtnTxt: '获取验证码',
                inviteQrCodeUrl: '',
                bindKfShow: false,
                canChangeKf: false,
                curSelectKf: '',
                canBindKfList: [],
                kfQrCodeUrl:'',
                kfQrcodeTemp: {},

                lbActivateShow: false,
                lbActivateInfo:{},
                lbBtnDisable: false,

                fiveDayJoin: false,
                fiveDayCanGet: false,
                fiveDayReward: 0,
                nextFiveGetDays: 0,

                showMyFiveDayQb: false,
                myFiveDayQList: [],
                myFiveDayQbQueryForm: {
                    page: 1,
                    status: 0,
                },
                myFiveDayQbTotalPage: 0,
                myFiveDayQbCurPage: 0,
            }
        },
        mounted() {
            this.ucPageRightStyle.width = (document.documentElement.clientWidth - (370 + document.documentElement.clientWidth*0.02))+'px'
            const type = this.getUrlParam('type')
            if (type) {
                this.changeActive(type)
            }
            this.getUserInfo()
            this.remoteGame('')
            api_getRechargeRules().then(res => {
                this.rechargeMoneyList = res.data
            })
            // 充值游戏跳转
            const gameId = this.getUrlParam('game_id')
            if (gameId) {
                this.initGameDh(gameId)
            }
            api_getLastGame().then(res => {
                this.zuiJinGames = res.data.zj
                this.daJiaGames = res.data.dj
            })
            this.getDhLog()
            this.checkNeedBindKf()
            this.getLbActivateInfo()
        },
        watch: {
            active(val) {

                switch(val) {
                    case 'dhLog':
                        this.getDhLog()
                        break;
                    case 'level':
                        this.getLevelList()
                        this.getFiveDayInfo()
                        break;
                    case 'rechargeLog':
                        this.getRechargeList()
                        break
                    case 'index':
                        api_loginOut().then(res => {
                            window.location.href = '/'
                        })
                        break;
                    case 'shop':
                        this.getGoods()
                        break;
                    case 'invitee':
                        this.initInviteQrCode()
                        break;
                }
            },
            payVisible(val) {
                if (!val && this.queryOrderStatusTimer) {
                    clearInterval(this.queryOrderStatusTimer)
                    return
                }
                this.queryOrderStatusTimer = setInterval(this.getOrderStatus, 2000)
            },
            'rechargeForm.money'(val) {
                if (+val > 0) {
                    this.rechargeForm.money = Math.ceil(+val)
                    api_getRechargeReward({money: val}).then(res => {
                        this.rechargeAfter = res.data
                    })
                }
            },
            'dhForm.money'(val) {
                this.dzRmbNum = 0
                if (val < 1000) {
                    return
                }
                if (val % 1000) {
                    return
                }
                let maxMoney = this.userInfo.user.ly_balance
                if (this.dhForm.balance_type === 2) {
                    maxMoney = this.userInfo.user.wf_integral
                }
                if (val > maxMoney) {
                    this.dhForm.money = maxMoney
                }
                this.dzRmbNum = this.getDzLy(+val)
            },
            showAddressWin(val) {
                if (val) {
                    this.getAddress()
                }
            }
        },
        methods: {
            useFiveDayDhq(id) {
                api_activateUseLevelDhq({id}).then(res => {
                    this.$message.success('兑换成功')
                    this.getFiveDayQbList()
                })
            },
            showFiveDayDhqList(){
                this.showMyFiveDayQb = true
                this.getFiveDayQbList()
            },
            myFiveDayQbPageChange(p) {
                this.myFiveDayQbQueryForm.page = p
                this.getFiveDayQbList()
            },
            getFiveDayQbList() {
                api_activateGetLevelDhqList(this.myFiveDayQbQueryForm).then(res => {
                    this.myFiveDayQList = res.data.data
                    this.myFiveDayQbTotalPage = res.data.last_page
                    this.myFiveDayQbCurPage = res.data.current_page
                })
            },
            getFiveDayDhq() {
                this.fiveDayCanGet = true
                    api_activateGetLevelReward({}).then(res => {
                    this.$message.success('领取成功')
                    this.getFiveDayInfo()
                }).catch(err => {
                    this.fiveDayCanGet = false
                })
            },
            getFiveDayInfo() {
                api_activateGetLevelRewardInfo({}).then(res => {
                    this.fiveDayJoin = res.data.join
                    if (this.fiveDayJoin) {
                        this.fiveDayReward = res.data.reward
                        this.fiveDayCanGet = res.data.can_get
                        if (!this.fiveDayCanGet) {
                            this.nextFiveGetDays = res.data.days
                        }
                    }
                })
            },
            getLbActivate() {
                this.lbBtnDisable = true
                api_activateGetLbReward({id: this.lbActivateInfo.id}).then(res => {
                    this.$message.success('领取成功')
                    this.lbActivateInfo.get_num += 1
                }).catch(err => {
                    this.lbBtnDisable = false
                })
            },
            getLbActivateInfo() {
                api_activateGetLbInfo().then(res => {
                    this.lbActivateShow = res.data.join
                    if (this.lbActivateShow) {
                        this.lbActivateInfo = res.data.data
                    }
                })
            },
            getDzLy(money) {
                return Math.floor(+money *1.01);
            },
             handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            getUrlParam(name) {
                let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                let r = window.location.search.substr(1).match(reg);
                if (r != null) return decodeURI(r[2]);
                return '';
            },
            changeActive(text) {
                this.active = text
            },
            changeTab(id) {
                this.active = id
            },
            getUserInfo() {
                api_getUserInfo().then(res => {
                    this.userInfo = res.data
                })
            },
            remoteGame(v) {
                api_getDhGameList({key: v}).then(res => {
                    this.gameList = res.data
                })
            },
            getServerList(id) {
                api_getDhServerList({id}).then(res => {
                    this.serverList = res.data
                })
            },
            gameChange(v) {
                this.getServerList(v)
            },
            commitDh() {
                if (!this.dhForm.game_account || (this.dhForm.game_account !== this.dhForm.game_account_pre)) {
                    this.$message.error('请输入账号或账号不一致')
                    return
                }
                api_commitDh(this.dhForm).then(res => {
                    this.$message.success('兑换成功')
                    setTimeout(() => {
                        location.reload()
                    },2000)
                })
            },
            getDhLog() {
                api_getDhLog().then(res => {
                    this.dhLogList = res.data
                })
            },
            getLevelList() {
                api_getLevelList().then(res => {
                    this.levelList = res.data
                })
            },
            startPay() {
                this.curOrderType = 1
                this.payLoading = true
                if (this.rechargeForm.money < 10) {
                    this.$message.error('金额必须大于10')
                    return
                }
                if (this.rechargeForm.money % 1 !== 0){
                    this.$message.error('金额必须是整数')
                    return
                }
                api_rechargePay(this.rechargeForm).then(res => {
                    console.log(res.data)
                    this.curOrderId = res.data.order_id
                    this.rechargeVisible = false
                    this.payLoading = false
                    this.rechargeForm = {
                        money: '',
                        pay_type: '',
                    }
                    this.openPayPage(res.data.pay_info)
                }).catch(err => {
                    this.payLoading = false
                })
            },
            getOrderStatus() {
                api_getOrderStatus({type: this.curOrderType, orderId: this.curOrderId}).then(res => {
                    if (res.data.status === 1) {
                        this.payVisible = false
                        this.$message.success('支付成功')
                        setTimeout(() => {
                            window.location.href = '/userCenter?type=recharge'
                        },2000)
                    }
                })
            },
            openPayPage(payInfo) {
                // 打开支付页面
                this.payInfo = payInfo.resultdata
                this.payVisible = true
                // 新窗口
                if (payInfo.resultdata.type === 2) {
                    window.open(payInfo.resultdata.data,'_blank');
                }
                // 二维码串
                if (payInfo.resultdata.type === 3) {
                    this.$nextTick(() => {
                        document.getElementById("qrcode").innerHTML = "";
                        new QRCode(document.getElementById("qrcode"), {
                            text: payInfo.resultdata.data,
                            width: 256,
                            height: 256,
                            colorDark : "#000",
                            colorLight : "#fff",
                            correctLevel : 0 // 二维码结构复杂性 0~3
                        });
                    })
                }
            },
            getRechargeList() {
                api_getRechargeLog().then(res => {
                    this.rechargeList = res.data
                })
            },
            getGoods() {
                api_getGoods().then(res => {
                    this.shopGoodsList = res.data
                })
            },
            getAddress() {
                api_getAddress().then(res => {
                    this.addressList = res.data
                })
            },
            addAddress() {
                this.saveAddressForm = {
                    id: 0,
                    nickname: '',
                    mobile: '',
                    address: '',
                    is_default: 2,
                }
                this.saveAddressWin = true
            },
            editAddress(item) {
                console.log(item.id)
                this.saveAddressForm = item
                this.saveAddressWin = true
            },
            delAddress(item) {
                this.$confirm('确定删除地址吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api_delAddress({id: item.id}).then(res => {
                        this.$message.success('删除成功')
                        this.getAddress()
                    })
                })
            },
            saveAddress() {
                api_saveAddress(this.saveAddressForm).then(res => {
                    this.$message.success('保存成功')
                    this.saveAddressWin = false
                    this.getAddress()
                })
            },
            dhGoods(item) {
                this.getAddress()
                this.shopOrderForm.goods_id = item.id
                this.showShopOrderWin = true
            },
            selectAddress(item) {
                this.shopOrderForm.address_id = item.id
            },
            createShopOrder() {
                api_shopCreateOrder(this.shopOrderForm).then(res => {
                    this.$message.success('兑换成功，请联系客服确认信息')
                    this.showShopOrderWin = false
                    this.getUserInfo()
                })
            },
            showIntegral (t) {
                this.showIntegralLogWin = true;
                if (t === 'wf') {
                    api_wfIntegralList().then(res => {
                        this.integralList = res.data
                    })
                    return
                }
                api_integralList().then(res => {
                    this.integralList = res.data
                })
            },
            initInviteQrCode() {
                this.$nextTick(() => {
                    api_getInviteCode({}).then(res => {
                        this.inviteQrCodeUrl = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket='+encodeURIComponent(res.data.ticket);
                        /*new QRCode(document.getElementById("invite-qr-code"), {
                            text: 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket='+encodeURIComponent(res.data.ticket),
                            width: 300,
                            height: 300,
                            colorDark : "#e54513",
                            colorLight : "#fff",
                            correctLevel : 0 // 二维码结构复杂性 0~3
                        });*/
                    })
                })
            },
            copyLink(text) {
                const save = function(e) {
                    e.clipboardData.setData('text/plain', text)
                    e.preventDefault() // 阻止默认行为
                }
                const once = {
                    once: true
                }
                document.addEventListener('copy', save, once) // 添加一个copy事件,当触发时执行一次,执行完删除
                document.execCommand('copy') // 执行copy方法
                this.$message.success('复制成功')
            },
            downloadQrCode() {
                const img = document.getElementById('invite-qr-code').getElementsByTagName('img')[0];
                img.setAttribute("crossOrigin", 'Anonymous');
                // 构建画布
                let canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;
                canvas.getContext('2d').drawImage(img, 0, 0);
                let base64Img = canvas.toDataURL()
                let link = document.createElement('a')
                link.href = base64Img
                link.download = '邀请二维码'+ Date.now()
                let event = document.createEvent('MouseEvents')
                event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null)
                link.dispatchEvent(event)
            },
            initGameDh(gid) {
                api_getDhGameById({id: gid}).then(res => {
                    this.gameList = [res.data]
                    this.getServerList(gid)
                    this.dhForm.game_id = +gid
                })
            },
            commitYj() {
                api_commitYj(this.yjjyForm).then(res => {
                    this.$message.success('提交成功')
                    this.yjjyForm.yj = ''
                })
            },
            getInviteeList() {
                this.showInviteeLogWin = true
                api_getInviteeList().then(res => {
                    this.inviteeList = res.data;
                })
            },
            getUserRecharge(id) {
                this.subRechargeList = []
                api_getRechargeLogByUser({id}).then(res => {
                    this.subRechargeList = res.data
                })
            },
            goLevel() {
                this.active = 'level'
            },
            commitRealName() {
                api_realName(this.realNameForm).then(res => {
                    this.$message.success('提交成功')
                    this.userInfo.user.id_card = this.realNameForm.idcard
                    this.realNameWin = false
                })
            },
            realNameClick() {
                if (this.userInfo.user.id_card) {
                    return
                }
                this.realNameWin = true
            },
            commitBindMobile() {
                api_bindMobile(this.bindMobileForm).then(res => {
                    this.$message.success('提交成功')
                    this.userInfo.user.mobile = this.bindMobileForm.mobile
                    this.bindMobileWin = false
                })
            },
            bindMobileClick() {
                if (this.userInfo.user.mobile) {
                    return
                }
                this.bindMobileWin = true
            },
            getSmsCode() {
                if (!this.bindMobileForm.mobile) {
                    this.$message.error('请输入手机号')
                    return
                }
                let t = 60
                api_getSmsCode({mobile:this.bindMobileForm.mobile}).then(res => {
                    this.smsBtnDisabled = true
                    const tm = setInterval(() => {
                        t--
                        this.smsBtnTxt = `${t}秒`
                        if (t <= 0) {
                            clearTimeout(tm)
                            this.smsBtnTxt = '获取验证码'
                            this.smsBtnDisabled = false
                        }
                    }, 1000)
                })
            },
            goGameSite(u) {
                console.log(u)
                if (u) {
                    window.open(u, '_blank');
                }
            },
            refreshUserInfo() {
                api_refreshUserInfo().then(res => {
                    location.reload()
                })
            },
            checkNeedBindKf() {
                api_getNeedBindKf({}).then(res => {
                    console.log(res)
                    this.bindKfShow = res.data.needChange
                    this.canBindKfList = res.data.kfList
                    this.canChangeKf = res.data.canChange
                })
            },
            getKfuCode(kfId) {
                if (this.kfQrcodeTemp[kfId]) {
                    this.kfQrCodeUrl = this.kfQrcodeTemp[kfId];
                    return
                }
                api_getKfQrCode({admin_id: kfId}).then(res => {
                    this.kfQrCodeUrl = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket='+encodeURIComponent(res.data.ticket)
                    this.kfQrcodeTemp[kfId] = this.kfQrCodeUrl
                })
            },
        },
    })
</script>
 <style>
    .text-center {
      text-align: center;
    }

    .activity-image {
      max-width: 100%;
      margin-bottom: 20px;
    }

    .el-card {
      margin-bottom: 20px;
    }
    .is-active {
      color: blue;
    }

  </style>
<script type="text/javascript" src="{{ asset('js/jquery-1.11.2.min.js') }}"></script>
<script>
    $(function () {
        $('.go-recharge-btn').click(function () {
            location.href = '/userCenter?type=uci'
        })
        $('.go-yjjy-btn').click(function () {
            location.href = '/userCenter?type=yjjy'
        })
    })
</script>

</html>
